<template>
  <div class="page">
    <!-- 头 代办事项 -->
    <!-- 待发货订单 待支付订单 已成交订单 库存预警 -->
    <!-- 超级管理员 支付总金额 支付订单数 会员新增（总会员）-->
     <el-scrollbar wrap-class="scrollbar-wrapper">
      <div class="deal">
        <!-- 普通管理员 -->
        <div>
          <h2>代办事项</h2>
          <el-row type="flex">
            <el-card
              class="box-card"
              v-for="item in dealThings"
              :key="item.index"
             
            >
              <div  @click="enter(item)">
                <p class="title">{{ item.content }}</p>
                <p class="num comm">
                  <span class="bold">{{ item.num }}</span
                  >单待处理
                </p>
                <p :class="item.num == 0 ? 'comm' : 'red'">有新的事项待处理</p>
              </div>
            </el-card>
          </el-row>
        </div>
        <!-- 超级管理员 -->
        <div>
          <h2>运营数据</h2>
          <el-row type="flex">
            <el-card class="card" v-for="item in yunyinData" :key="item.index">
              <div>
                <p class="title">{{ item.content }}</p>
                <p class="bold">{{ item.num }}</p>
                <p class="total">总计：{{ item.history }}</p>
              </div>
            </el-card>
          </el-row>
        </div>
      </div>
      <!-- 中间 图表  -->
      <!-- 商品订单量和对应的成交金额 、客流量-->
      <div class="analysis">
        <h2>数据分析</h2>
        <div>
          <div ref="saleChart" style="height: 450px; width:660px;float:left"></div>
          <div ref="userChart" style="height: 250px; width:500px;float:left;margin-top:60px"></div>
        </div>
      </div>

      <!-- 常用组件 -->
      <div class="utilities"></div>
     </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "showPage",
  data() {
    return {
      dealThings: [
        {
          content: "待发货订单",
          num: 1,
        },
        {
          content: "待支付订单",
          num: 2,
        },
        {
          content: "待收货订单",
          num: 1,
        },
        {
          content: "库存预警",
          num: 0,
        },
        {
          content: "待核销订单",
          num: 0,
        },
      ],
      yunyinData: [
        {
          content: "今日支付总金额",
          num: 120.0,
          history: 2300.76,
        },
        {
          content: "今日支付订单数",
          num: 10,
          history: 45,
        },
        {
          content: "今日会员新增",
          num: 0,
          history: 120,
        },
        {
          content: "商品总数",
          num: 12,
          history: 12,
        },
      ],
      xAxisData:[],
      NumData:[],
      moneyData:[],
      bieData:[]
    };
  },
 created(){
   this.getIndexData()
   this.getBieData()
   this.$nextTick(()=>{
     this.userDataChart();
   })
    
 },
  mounted(){
      this.userDataChart();
      this.drawChart();
  },
  updated() {
    this.drawChart();
    this.userDataChart();
    
  },
  methods: {
    enter(v){
      console.log(v.content)
      if(v.content=='待发货订单'){
        this.$router.push('/sendOrder')
      }else if(v.content=='待支付订单'){
        this.$router.push('/order')
      }else if(v.content=='待收货订单'){
        this.$router.push('/sendOrder')
      }else if(v.content=='库存预警'){
        this.$router.push('/store')
      }else if(v.content=='待核销订单'){
        this.$router.push('/rejectOrder')
      }
    },
    getBieData(){
      this.$axios.post('/api/index/analysisData2').then((res)=>{
        console.log(res)
        var list = res.data.data
        for(var i =0;i<list.length;i++){
          this.bieData.push({
            name:list[i].goodsName,
            value:list[i].goodsPayNum
          })
        }
        console.log(this.bieData)
      })
    },
    getIndexData(){
      this.$axios.post('/api/index/getData1').then((res)=>{
        console.log(res.data.data)
        if(res.data.code==200){
          this.dealThings[0].num=res.data.data.undeliveredOrderNum
          this.dealThings[1].num=res.data.data.unpaidOrderNum
          this.dealThings[2].num=res.data.data.toBeDeliverOrderNum
          this.dealThings[3].num=res.data.data.stocksWarning
          this.dealThings[4].num=res.data.data.notWrittenOff
          this.yunyinData[0].num=res.data.data.dayTotalMoney==null? 0:res.data.data.dayTotalMoney
          this.yunyinData[0].history=res.data.data.totalMoney
          this.yunyinData[1].num=res.data.data.dayTotalPayNum
          this.yunyinData[1].history=res.data.data.totalPayNum
          this.yunyinData[2].num=res.data.data.dayUserNum
          this.yunyinData[2].history=res.data.data.totalUserNum
          this.yunyinData[3].num=res.data.data.goodsNum
          this.yunyinData[3].history=res.data.data.goodsNum
          var list = res.data.data.dataAnalysisList
          list.sort(function(a,b){
            return a.day<a.day?1:-1
          }) 
          for(var i =0;i<list.length;i++){
            this.xAxisData.push(list[i].nowDay)
            this.NumData.push(list[i].dayOrderNum)
            if(list[i].dayOrderMoney==null){
              list[i].dayOrderMoney=0
            }
            this.moneyData.push(list[i].dayOrderMoney)
          }
          // console.log(this.xAxisData)
          // console.log(this.NumData)
          // console.log(this.moneyData)
        }
      })
    },
    drawChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(this.$refs.saleChart);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisData,
        },
        yAxis: [
          {
            name: "订单数量",
            type: "value",
            min: 0,
            max: 100,
            interval: 15,
            position: "left",
          },
          {
            name: "订单金额",
            type: "value",
            min: 0,
            max: 1000,
            interval: 150,
            position: "right",
          },
        ],
        series: [
          {
            name: "订单数量",
            data: this.NumData,
            type: "line",
            yAxisIndex: 0,
            areaStyle: {},
          },
          {
            name: "订单金额",
            data: this.moneyData,
            type: "line",
            yAxisIndex: 1,
            areaStyle: {},
          },
        ],
      };
      myChart.setOption(option);
      myChart = null
    },
    userDataChart() {
      let echarts = require("echarts");
      let myChart = echarts.init(this.$refs.userChart);
      let option = {
        title: {
          text: "热销商品",
          left: "center",
          top: 20,
        },
      
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: "商品成交量",
            type: "pie",
            radius: "50%",
            data: this.bieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              }
            }
          }
        ]
      }
      myChart.setOption(option);
      myChart = null
    }
  }
}
</script>

<style  scoped>
h2 {
  font-size: 20px;
  text-align: left;
  position: relative;
  padding-left: 10px;
  margin: 30px 0;
}
h2::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 16px;
  background-color: #17a1ff;
  top: 5px;
  left: 0;
}
.box-card {
  width: 240px;
  height: 150px;
  margin-right: 20px;
  box-sizing: border-box;
  background-color: #f6f9ff;
  border: 1px solid #f6f9ff;
}
.title {
  color: #333;
}
.bold {
  font-size: 24px;
  font-weight: 700;
  color: #4d4d4d;
  padding-right: 10px;
}
.red {
  color: #f0242e;
  font-size: 12px;
  padding-top: 20px;
}
.comm {
  font-size: 12px;
  color: #b3b3b3;
  padding-top: 20px;
}
.card {
  width: 330px;
  height: 166px;
  padding: 0 30px;
  margin-right: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(60, 81, 236, 0.19);
  text-align: left;
}
.card .title {
  color: #666;
  font-weight: 500;
}
.card .bold {
  font-size: 30px;
  padding-top: 30px;
}
.total {
  font-size: 14px;
  padding-top: 20px;
  color: #8d99a3;
}
.el-scrollbar__wrap.default-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
